<template>
    <div class="main">
        <!-- <vue-telegram-login  mode="callback" telegram-login="ojjk_bot" @callback="handleLogin" /> -->

        <span>{{ $t('message.checkFans.a') }}</span>
        <span>{{ $t('message.checkFans.b') }}</span>
        <div class="icon_box">

            <Card v-for="(item, i) in check_fans.icons.value" :cid="i" :card="item" @update="onUpdateState"
                :callfun="check_fans.callfun.bind(check_fans)"></Card>
        </div>
        <!-- <FansAlert></FansAlert> -->
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch, onBeforeUnmount } from "vue";
import Card from "./components/card/crad.vue";
import FansAlert from "./components/fans_alert/index.vue";
import { check_fans,timer } from "./script/check_fans";
import { useUser } from "@/stores/user";
// import VueTelegramLogin from 'vue-telegram-login'
const user = useUser();
const telegram = ref("");

function handleLogin(user: any) {
    console.log(user)
}
watch(() => user.energyChange, (val) => {
    check_fans.init();
});

onMounted(async () => {
    check_fans.init();
    // setTimeout(() => {
    //     if (timer) {
    //         clearInterval(timer)
    //     }
    // }, 3000000)

});


onBeforeUnmount(() => {
    console.log(timer,"timert")
    if (timer) {
        clearInterval(timer)
    }
})
function onUpdateState() {
    // check_fans.icons.value[0].active = user.isTelegramUser;
}
</script>
<style scoped lang="less">
.main {
    padding: 20px 20px 6px;
    background: #1C1F25;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    span:nth-child(1) {
        font-size: 16px;
        font-weight: 600;
        color: #EAECEF;
        line-height: 22px;
        margin-bottom: 6px;
    }

    span:nth-child(2) {
        width: 203px;
        font-size: 12px;
        font-weight: 400;
        color: #B1B6C6;
        line-height: 17px;
        margin-bottom: 16px;
    }

    .icon_box {
        // background-color: blue;
        display: flex;
    }
}
</style>